<span class="button link" id="rules">Show the rules</span>

<div class="rules container hide">
    <img class="negative" src="assets/img/charter.jpg">
    <img class="negative" src="assets/img/rules_of_conduct.jpg">
</div>

<div class="table_wrapper">
    <table class="container table align-middle">
        <thead>
            {% for header in headers %}<th>{{ header }}</th>{% endfor %}
        </thead>
        <tbody>
            {% for name, values in table.items() -%}
            <tr>
                <td><img class="photo" src="assets/img/photos/{{ name }}.jpg"></td>
                <td>{{ name }}</td>
                {% for value in values -%}
                    <td>{{ '<br>'.join(value.split('|')) }}</td>
                {% endfor -%}
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>